<template>
	<view class="app">
		<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="再团收益中心" :status-bar="true" :border="false"></com-nav-bar>
		
		<view class="app-body">
			<view class="content">
				
				<view class="content-head" style="padding: 20rpx;">

					<view style="background-color: #fff;">
						<view class="jx-header-btm">
							<view class="jx-btm-item" @click="openUrl('/plugins/local_life/incomeList')">
								<view class="jx-btm-num">{{local_life_info.income}}</view>
								<view class="jx-btm-text">佣金</view>
							</view>
							<view class="jx-btm-item" @click="openUrl('/plugins/local_life/account?type=score')">
								<view class="jx-btm-num">{{local_life_info.score_price}}</view>
								<view class="jx-btm-text">消费积分</view>
							</view>
							<view class="jx-btm-item last" @click="openUrl('/plugins/local_life/account?type=price')">
								<view class="jx-btm-num">{{local_life_info.subsidy_price}}</view>
								<view class="jx-btm-text">补贴金额</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="content-body">
					<view class="common-box-down" @click="openUrl('/plugins/local_life/userList')">
						<view class="data-item flex flex-y-center flex-x-between">
							<view>我的客户</view>
							<view class="flex" style="align-items: center;">
								<view>{{userInfo.children_total}} 人</view>
								<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
									<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
										<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
									</svg>
								</view>
							</view>	
						</view>
					</view>
					
					<view class="common-box-down" @click="openUrl('/plugins/local_life/storeList')">
						<view class="data-item flex flex-y-center flex-x-between">
							<view>合作商家</view>
							<view class="flex" style="align-items: center;">
								<view>{{userInfo.store_total}} 人</view>
								<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
									<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
										<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
									</svg>
								</view>
							</view>	
						</view>
					</view>
					
					<view class="common-box-down" @click="openUrl('/plugins/local_life/orderList?type=user')">
						<view class="data-item flex flex-y-center flex-x-between">
							<view>客户消费</view>
							<view class="flex" style="align-items: center;">
								<!-- <view>{{data ? data.curMonthConsumePrice :'0'}} 元</view> -->
								<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
									<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
										<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
									</svg>
								</view>
							</view>	
						</view>
					</view>
					
					<view class="common-box-down" @click="openUrl('/plugins/local_life/orderList?type=store')">
						<view class="data-item flex flex-y-center flex-x-between">
							<view>商家收款</view>
							<view class="flex" style="align-items: center;">
								<!-- <view>{{data ? data.curMonthConsumePrice :'0'}} 元</view> -->
								<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
									<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
										<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
									</svg>
								</view>
							</view>	
						</view>
					</view>
					
				</view>

			</view>
		</view>
		<main-loading :visible="loading"></main-loading>
	</view>
</template>

<script>
	import {formatTimeToStr} from '@/utils/date.js';
	export default {
		data() {
			return {
				data: null,
				loading: false,
				type: 1,
				curMonthDateTime:[],
				lastMonthDataTime:[],
				userInfo:{
					children_total:0,
					store_total:0
				},
				local_life_info:{
					income:0,
					score_price:0,
					subsidy_price:0 
				}
				// curfirstDayOfMonthTime:'',
				// lastfirstDayOfMonthTime:'',
				// curfirstDayOfMonth:'',//本月第一天
				// lastfirstDayOfMonth:'',//上月第一天
				// curDate:'',//当前日期

			}
		},
		onLoad() {
			let currentDate = new Date();
			//本月数据的起止时间
			this.curMonthDateTime = [
				this.formatTimeToStr(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getTime()),
				this.formatTimeToStr(new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate()).getTime() + 86399000)
			];
			
			//上月数据的起止时间
			this.lastMonthDataTime = [
				this.formatTimeToStr( new Date(currentDate.getFullYear(), currentDate.getMonth()-1, 1).getTime()),
				this.formatTimeToStr(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getTime() - 1000)
			];

		},
		onShow(){
			this.getUser()
		},
		computed:{
			formatTimeToStr(value,format = 'yyyy-MM-dd hh:mm:ss'){
				return value => formatTimeToStr(value,format)
			}
		},
		methods: {
			async getUser(){
				let res = await this.$http.request({
					url: this.$api.localLife.userInfo,
					method: 'POST',
					showLoading: true
				});
				if (res.code == 0) {
					this.userInfo = res.data;
					this.local_life_info = res.data.local_life_info;
				}
			},
			
			getData() {
				this.loading = true;
				this.$http.request({
					url: this.$api.localLife.statisticsTotal,
					method: 'POST'
				}).then(res => {
					this.loading = false;
					if (res.code == 0) {
						this.data = res.data;
					}
				})
			},
			back() {
				this.navBack();
			},
			openUrl(url) {
				uni.navigateTo({url})
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.app {
		min-height: 100%;
		background-color: #F2F2F2;

		.app-body {
			color: #000000;
			position: relative;
			
			.content {
				position: relative;

				.content-head {
					// padding-bottom: 100rpx;

					.withdraw {
						justify-content: flex-end;

						.icon-text {
							align-items: center;
							background-color: #ffbc00;
							font-size: 9pt;
							line-height: 54rpx;
							padding: 0 10rpx;
							border-bottom-left-radius: 27rpx;
							border-top-left-radius: 27rpx;

							.icon {
								font-size: 11pt;
								line-height: 26px;

								&.icon-tixian {
									margin-left: 10rpx;
								}
							}

							.text {
								margin-left: 6rpx;
							}
						}
					}
					
					.local-life-level {
						justify-content: flex-end;
					
						.icon-text {
							align-items: center;
							background-color: #ffbc00;
							font-size: 9pt;
							line-height: 54rpx;
							padding: 0 10rpx;
							border-bottom-right-radius: 27rpx;
							border-top-right-radius: 27rpx;
							.text {
								margin-left: 6rpx;
							}
						}
					}
					

					.income {
						padding: 0 30rpx;
						margin-bottom: 40rpx;

						.total {
							align-items: center;
							justify-content: center;
							flex-direction: column;
							margin-bottom: 80rpx;
							font-size: 11pt;

							.sum {
								font-size: 23pt;
								font-weight: bold;
							}

							.yesterday {
								padding: 0 20rpx;
								background-color: #FFFFFF;
								color: #BC0100;
								font-size: 9pt;
								font-weight: 700;
								line-height: 45rpx;
								border-radius: 22rpx;
							}
						}

						.status {
							font-size: 12pt;

							.text {
								font-size: 10pt;
							}
						}
					}
				}

				.team-benefits {
					padding: 30rpx 0;
					color: #212121;
					background-color: #FFFFFF;
					display: flex;
					margin: 0 30rpx;
					border-radius: 10rpx;
					// box-shadow: 0 8rpx 11rpx 3rpx rgba(8, 1, 3, 0.07);

					.icon {
						font-size: 18pt;
						color: #BC0100;
						line-height: 56rpx;
					}

					.text {
						font-size: 11pt;
					}
				}
			}
		}
	}

	.status {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
		line-height: 60rpx;
		border-bottom: 1rpx solid #f2f2f2;
		.name {
			text-align: center;
			margin: 0 10px;
		}
	}
	
	.flex {
		display: flex;
	}

	.flex-column-x-center {
		flex: 1;
		flex-direction: column;
		align-items: center;
	}
	
	
	.content-body{
		padding: 0 20rpx;
		background-color: #ffffff;
	}
	
	.common-box-down{
		padding: 30rpx 0;
		border-top: 1rpx solid #f2f2f2;
	}
	
	.jx-content-box {
		margin-bottom: 30rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		// top: -72rpx;
		z-index: 10;
	}
	
	.jx-header-btm {
		border-radius: 12rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		background: #ffffff;
	}
	.jx-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 10rpx;
		position: relative;
		&::after {
			content: '';
			border-right: 1rpx solid #b3b3b3;
			width: 1px;
			height: 100rpx;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	
		&:last-child {
			&::after {
				display: none;
			}
		}
	}
	
	.jx-btm-num {
		font-size: 11pt;
		font-weight: 600;
		position: relative;
	}
	
	.jx-btm-text {
		font-size: 9pt;
		opacity: 0.85;
		padding-top: 4rpx;
	}
	
	.jx-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>
